import React from 'react';
import { Card, Row, Col, Statistic, Button, Space } from 'antd';
import {
  MobileOutlined,
  AppstoreOutlined,
  CloudServerOutlined,
  LineChartOutlined,
  SettingOutlined,
  MonitorOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const IoTDashboard: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div>
      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="设备总数"
              value={1234}
              prefix={<MobileOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="产品数量"
              value={56}
              prefix={<AppstoreOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="在线设备"
              value={987}
              prefix={<CloudServerOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日消息"
              value={12345}
              prefix={<LineChartOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 快捷操作 */}
      <Card title="快捷操作" style={{ marginBottom: 24 }}>
        <Row gutter={16}>
          <Col span={8}>
            <Card
              hoverable
              style={{ textAlign: 'center' }}
              onClick={() => navigate('/iot/device')}
            >
              <MobileOutlined style={{ fontSize: 48, color: '#1890ff', marginBottom: 16 }} />
              <h3>设备管理</h3>
              <p>管理IoT设备，查看设备状态和数据</p>
            </Card>
          </Col>
          <Col span={8}>
            <Card
              hoverable
              style={{ textAlign: 'center' }}
              onClick={() => navigate('/iot/product')}
            >
              <AppstoreOutlined style={{ fontSize: 48, color: '#52c41a', marginBottom: 16 }} />
              <h3>产品管理</h3>
              <p>管理IoT产品，配置产品功能和属性</p>
            </Card>
          </Col>
          <Col span={8}>
            <Card
              hoverable
              style={{ textAlign: 'center' }}
              onClick={() => {
                // 暂时显示提示，后续可以添加更多功能
                alert('功能开发中...');
              }}
            >
              <MonitorOutlined style={{ fontSize: 48, color: '#722ed1', marginBottom: 16 }} />
              <h3>数据监控</h3>
              <p>实时监控设备数据和运行状态</p>
            </Card>
          </Col>
        </Row>
      </Card>

      {/* 系统状态 */}
      <Row gutter={16}>
        <Col span={12}>
          <Card title="设备状态分布" style={{ height: 300 }}>
            <div style={{ textAlign: 'center', paddingTop: 80 }}>
              <LineChartOutlined style={{ fontSize: 48, color: '#ccc' }} />
              <p style={{ color: '#999', marginTop: 16 }}>图表功能开发中...</p>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="消息统计" style={{ height: 300 }}>
            <div style={{ textAlign: 'center', paddingTop: 80 }}>
              <LineChartOutlined style={{ fontSize: 48, color: '#ccc' }} />
              <p style={{ color: '#999', marginTop: 16 }}>图表功能开发中...</p>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default IoTDashboard;